.box {
    width: 100px;
}

//定义变量
$mun: 100px;
.box1 {
    margin: $mun;
}

$i: 2;
.box#{$i} {
    margin: $mun;
}

@function a($a, $b) {
    @return $a+$b;
}

.box3 {
    margin: a(40px, 40px);
}

ul {
    left: 10px;
    li {
        a {
            margin: 100px;
            border: 10px;
        }
    }
    &:hover {
        background-color: rebeccapurple;
    }
}

//混入
@mixin test($a) {
    display: inline;
    color: $a;
}

.box4 {
    @include test(red);
}

//继承
.father {
    color: red;
}

.son {
    @extend .father;
    transform: matrix(100px) scale(10px);
}

.box5 {
    width: 100px;
    @media all and (min-width: 760px) {
        width: 500px;
    }
    @media all and (min-width: 1440px) {
        width: 1000px;
    }
}

$a: 2;
//条件判断
.box11 {
    @if $a>=2 {
        width: 100px;
    }
    @else {
        width: 200px;
    }
}

//for循环
@for $i from 1 to 6 {
    .box-#{$i} {
        bottom: $i;
    }
}

//导入
@import '57-CSS预处理导入文件.scss';